<template>
  <div class="table-page">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item hide-label field="sourceChatroomId" :show-colon="true">
        <a-select v-model="listParams.sourceChatroomId" placeholder="全部源头群" @change="changeCurrent(1)">
          <a-option :value="item.sourceChatRoomId" v-for="(item, index) in groupList" :key="index">{{
            item.name
          }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item hide-label field="wxid" :show-colon="true">
        <a-select v-model="listParams.wxid" placeholder="全部发送人" @change="changeCurrent(1)">
          <a-option :value="item.sender" v-for="(item, index) in sendList" :key="index">
            {{ item.nickname }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="发送时间" :show-colon="true">
        <ms-date
          v-model:start="listParams.startAt"
          v-model:end="listParams.endAt"
          @dateChange="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item label="订单时间" :show-colon="true">
        <ms-date
          v-model:start="listParams.orderStartAt"
          v-model:end="listParams.orderEndAt"
          @dateChange="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default> 查询 </template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default> 重置 </template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="id"
      id="groupCopywriting"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #content="{ record }">
        <template v-if="record.content">
          <a-popover title="文案内容">
            <div class="text-overflow-1 w-full overflow-hidden">{{ record.content }}</div>
            <template #content>
              <div style="word-break: break-word; white-space: pre-line" class="w-70n">{{ record.content }}</div>
            </template>
          </a-popover>
        </template>
        <template v-else>--</template>
      </template>
    </GiTable>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { sourceChatRoomCountCopyrightingList, sourceChatRoomCountSearch, sourceChatRoomCountSenderList } from '@/apis'
import dayjs from 'dayjs'

const columns = ref([
  {
    title: '群名称',
    width: 150,
    render: (data) => {
      const text = data.record.sourceChatroomName
      return text || '--'
    }
  },
  {
    title: '发送人',
    width: 150,
    align: 'center',
    render: (data) => {
      const text = data.record.senderName
      return text || '--'
    }
  },
  {
    title: '文案内容',
    width: 300,
    slotName: 'content'
  },
  {
    title: '发送时间',
    width: 150,
    align: 'center',
    render: (data) => {
      const text = data.record.submitAt
      return text || '--'
    }
  },
  {
    title: '出单量',
    width: 100,
    align: 'center',
    dataIndex: 'orderCount'
  },
  {
    title: '重复数量',
    width: 100,
    align: 'center',
    dataIndex: 'messageRepeatCount'
  }
])
const loading = ref(false)
const tableData = ref([])
const groupList = ref([])
const sendList = ref([])
const { pagination, setTotal } = usePagination(() => getTableData(), {
  defaultPageSize: 20
})

const listParams = reactive({
  page: 1,
  sourceChatroomId: '',
  wxid: undefined,
  startAt: dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  endAt: dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss'),
  orderEndAt: dayjs().subtract(7, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss'),
  orderStartAt: dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
})

const getGroupList = async () => {
  const res = await sourceChatRoomCountSearch()
  groupList.value = res.data.list
}
getGroupList()

const getSendList = async () => {
  const res = await sourceChatRoomCountSenderList()
  sendList.value = res.data.list
}
getSendList()
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    const res = await sourceChatRoomCountCopyrightingList(listParams)
    tableData.value = res.data.list
    setTotal(res?.data?.totalCount)
  } finally {
    loading.value = false
  }
}
getTableData()
// // 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.sourceChatroomId = listParams.wxid = undefined
  listParams.startAt = dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  listParams.endAt = dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')
  listParams.orderStartAt = dayjs().subtract(7, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  listParams.orderEndAt = dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
// :deep(.arco-descriptions-item-value-block) {
//   white-space: nowrap;
// }
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .btn_wrap {
    dl {
      border-radius: 5px;
      color: #3e3e3e;
    }
    .dl_1 {
      background: rgba(251, 230, 239);
    }
    .dl_2 {
      background: rgba(232, 249, 240);
      dd {
        color: #0fbf60;
      }
    }
    .dl_3 {
      background: rgba(241, 241, 241);
      dd {
        color: rgba(157, 157, 157);
      }
    }
  }
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
